<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <t-form  :data="formData" labelWidth="0px" @submit="submit">
      <t-row>
        <t-col :span="2" class="title">个人简介：(限3000字)</t-col>
        <t-col :span="10">
          <t-form-item name="personalInfo">
            <t-textarea
              v-if="editOpen"
              clearable
              placeholder="请输入个人简介"
              :autosize="{ minRows: 8 }"
              :maxlength="3000"
              v-model="formData.personalInfo"
            ></t-textarea>
            <div v-else style="min-height: 150px">{{formData.personalInfo}}</div>
          </t-form-item>
        </t-col>
      </t-row>
      <t-row>
        <t-col :span="2" class="title">社会兼职：(限500字)</t-col>
        <t-col :span="10">
          <t-form-item name="personalInfo">
            <t-textarea
              v-if="editOpen"
              clearable
              placeholder="请输入社会兼职"
              :autosize="{ minRows: 4 }"
              :maxlength="500"
              v-model="formData.pluralistic"
            ></t-textarea>
            <div v-else style="min-height: 150px">{{formData.pluralistic}}</div>
          </t-form-item>
        </t-col>
      </t-row>
      <!--    <t-row>-->
      <!--      <t-col :span="2" class="title">在相关企业、专业镇、高新区、民营科技园区、产业转移园区等任（挂）职或派驻为特派员等：(限500字)</t-col>-->
      <!--      <t-col :span="10">-->
      <!--        <t-form-item name="expertBank.bankUsername">-->
      <!--          <t-textarea clearable placeholder="请输入" v-model="formData.expertBank.bankUsername"></t-textarea>-->
      <!--        </t-form-item>-->
      <!--      </t-col>-->
      <!--    </t-row>-->
      <div style="display:flex;justify-content: center;align-items: center;padding: 20px"><t-button size="large" v-if="editOpen"  theme="primary" type="submit">提交</t-button></div>
    </t-form>
  </div>
</template>

<script>
export default {
  name: 'expert',
  props: {
    objId: {
      type: [Number, String]
    },
    editOpen: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      formData: {
        expertId: this.objId,
        personalInfo: '',
        pluralistic: '',
      },
    };
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj();
        }
      }
    }
  },
  methods: {
    submit() {
      let apiOption = '';
      if (this.formData.id) {
        apiOption = 'expertIntroduceEdit';
      } else {
        apiOption = 'expertIntroduceAdd';
      }
      this.$api.zjk.expert[apiOption](this.formData)
        .then((response) => {
          if(response?.data?.id){
            this.formData.id = response?.data?.id
          }
          this.$message.success('修改成功');
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    getObj() {
      this.$api.zjk.expert
        .expertIntroduceByExpertId(this.objId)
        .then((response) => {
          if (response.data) this.formData = { ...response.data, expertId: this.objId };
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
  },
};
</script>

<style lang="less" scoped>
.t-row {
  align-items: stretch;
  .t-form__item {
    width: 100%;
  }
  .t-col {
    border: 1px solid #ddd;
    color: #333;
    min-height: 37px;
    padding: 4px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .title {
    background-color: #f1f1f1;
    justify-content: flex-end;
  }
}
</style>
